<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>JQM Charts</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" type="text/css" href="css/login.css" />
<link rel="stylesheet"  href="css/datepicker.css" /> 
	<link href="css/jquery.jqplot.css" rel="stylesheet" type="text/css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script>
		//reset type=date inputs to text
		$( document ).bind( "mobileinit", function(){
			$.mobile.page.prototype.options.degradeInputs.date = true;
		});	
	</script>
	<script src="jQuery.ui.datepicker.js"></script>
	<script src="jquery.ui.datepicker.mobile.js"></script>
	<script src="nu.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

	<style type="text/css">
		.myChart {
			width: 300px;
			height: 200px;
		}
	</style>
	<script type="text/javascript"><!--
		google_ad_client = "ca-pub-9291736771592509";
		/* JQMDemoAd1 */
		google_ad_slot = "9699201605";
		google_ad_width = 320;
		google_ad_height = 50;
	//-->
	</script>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-32423518-1']);
		_gaq.push(['_trackPageview']);

		(function () {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
</head>
<body>
<div id="pageBarChart" data-role="page" data-add-back-btn="true" data-rockncoder-jspage="manageBarChart"> 
      <header data-role="header" data-position="fixed">
      <a href="menu.nu" data-role="button" data-icon="arrow-l">Back</a>
      <a href="menu.nu" data-role="button" class="ui-btn-right" data-icon="home">Home</a>
         <center><img src="././img/params.png" height="50"></center>
      </header>
		<section data-role="content">
		      <center><p><font size="5">${requestScope.statVO.ghvo.id }</font><font size="3" color="#5D5D5D">님 그룹 방문 통계</font></p><br>
			<div id="barChart" class="myChart"></div>
			<!-- <button id="refreshBarChart" value="Refresh Chart" data-mini="true"></button> -->
			<input type="hidden" id="pageBarSliderA" value="${requestScope.statVO.ghvo.study}" data-mini="true"/>
			<input type="hidden" id="pageBarSliderB" value="${requestScope.statVO.ghvo.sports}" data-mini="true"/>
			<input type="hidden" id="pageBarSliderC" value="${requestScope.statVO.ghvo.smoking}" data-mini="true"/>
			<input type="hidden" id="pageBarSliderD" value="${requestScope.statVO.ghvo.finance}" data-mini="true"/>
			<input type="hidden" id="pageBarSliderE" value="${requestScope.statVO.ghvo.living}" data-mini="true"/><center>
		</section>
		<p><a href="#pagePlotChart1"><button><img src="././img/study_point.png" height="50" ></button></a></p>
		<p><a href="#pagePlotChart2"><button><img src="././img/sports_point.png" height="50" ></button></a></p>
		<p><a href="#pagePlotChart3"><button><img src="././img/smoking_point.png" height="50" ></button></a></p>
		<p><a href="#pagePlotChart4"><button><img src="././img/finance_point.png" height="50" ></button></a></p>
		<p><a href="#pagePlotChart5"><button><img src="././img/living_point.png" height="50" ></button></a></p>
	<footer data-role="footer" data-position="fixed">
    <p><center><img src="./img/footer.png" height="15"></center></p>
    </footer>
  </div>
  <div id="pagePlotChart1" data-role="page" data-rockncoder-jspage="managePlotChart1">
		<header data-role="header" data-position="fixed">
		 <a href="#pageBarChart" data-role="button" data-icon="arrow-l">Back</a>
      <a href="menu.nu" data-role="button" class="ui-btn-right" data-icon="home">Home</a>
         <center><img src="././img/params.png" height="50"></center>
      </header>
		<section data-role="content">
			<center><p><font size="5">${requestScope.statVO.ghvo.id }</font><font size="3" color="#5D5D5D">님 공부 포인트 통계</font></p><br>
			<div id="plotChart1" class="myChart"></div>
			<c:forEach var="spvo" items="${requestScope.statVO.list}"begin="0" varStatus="count">
      			 <span id="1getDate${count.index}">수집일 : <font size="2" color="#5D5D5D">${spvo.time_posted }</font><br></span>
     			 <input type="hidden" id="plot${count.index}" value="${spvo.study_point}" data-mini="true"/>
			</c:forEach></center>
		</section>
		<footer data-role="footer" data-position="fixed">
    <p><center><img src="./img/footer.png" height="15"></center></p>
    </footer>
	</div>
	 <div id="pagePlotChart2" data-role="page" data-rockncoder-jspage="managePlotChart2">
		<header data-role="header" data-position="fixed">
		 <a href="#pageBarChart" data-role="button" data-icon="arrow-l">Back</a>
      <a href="menu.nu" data-role="button" class="ui-btn-right" data-icon="home">Home</a>
         <center><img src="././img/params.png" height="50">
      </header>
		<section data-role="content">
		<center><p><font size="5">${requestScope.statVO.ghvo.id }</font><font size="3" color="#5D5D5D">님 운동 포인트 통계</font></p><br>
			<div id="plotChart2" class="myChart"></div>
			<c:forEach var="spvo" items="${requestScope.statVO.list}"begin="0" varStatus="count">
      			 <span id="2getDate${count.index}">수집일 : <font size="2" color="#5D5D5D">${spvo.time_posted }</font><br></span>
     			 <input type="hidden" id="plot${count.index}" value="${spvo.sports_point}" data-mini="true"/>
			</c:forEach></center>
		</section>
		<footer data-role="footer" data-position="fixed">
    <p><center><img src="./img/footer.png" height="15"></center></p>
    </footer>
	</div>
	 <div id="pagePlotChart3" data-role="page" data-rockncoder-jspage="managePlotChart3">
		<header data-role="header" data-position="fixed">
		 <a href="#pageBarChart" data-role="button" data-icon="arrow-l">Back</a>
      <a href="menu.nu" data-role="button" class="ui-btn-right" data-icon="home">Home</a>
         <center><img src="././img/params.png" height="50"></center>
      </header>
		<center><p><font size="5">${requestScope.statVO.ghvo.id }</font><font size="3" color="#5D5D5D">님 금연 포인트 통계</font></p><br>
				<div id="plotChart3" class="myChart"></div>
			<c:forEach var="spvo" items="${requestScope.statVO.list}"begin="0" varStatus="count">
      			 <span id="3getDate${count.index}">수집일 : <font size="2" color="#5D5D5D">${spvo.time_posted }</font><br></span>
     			 <input type="hidden" id="plot${count.index}" value="${spvo.smoking_point}" data-mini="true"/>
			</c:forEach></center>
			<footer data-role="footer" data-position="fixed">
    <p><center><img src="./img/footer.png" height="15"></center></p>
    </footer>
	</div>
	 <div id="pagePlotChart4" data-role="page" data-rockncoder-jspage="managePlotChart4">
		<header data-role="header" data-position="fixed">
		 <a href="#pageBarChart" data-role="button" data-icon="arrow-l">Back</a>
      <a href="menu.nu" data-role="button" class="ui-btn-right" data-icon="home">Home</a>
         <center><img src="././img/params.png" height="50"></center>
      </header>
		<section data-role="content">
		<center><p><font size="5">${requestScope.statVO.ghvo.id }</font><font size="3" color="#5D5D5D">님 재테크 포인트 통계</font></p><br>
			<div id="plotChart4" class="myChart"></div>
			<c:forEach var="spvo" items="${requestScope.statVO.list}"begin="0" varStatus="count">
      			 <span id="4getDate${count.index}">수집일 : <font size="2" color="#5D5D5D">${spvo.time_posted }</font><br></span>
     			 <input type="hidden" id="plot${count.index}" value="${spvo.finance_point}" data-mini="true"/>
			</c:forEach></center>
			<footer data-role="footer" data-position="fixed">
    <p><center><img src="./img/footer.png" height="15"></center></p>
    </footer>
		</section>
	</div>
	 <div id="pagePlotChart5" data-role="page" data-rockncoder-jspage="managePlotChart5">
		<header data-role="header" data-position="fixed">
		 <a href="#pageBarChart" data-role="button" data-icon="arrow-l">Back</a>
      <a href="menu.nu" data-role="button" class="ui-btn-right" data-icon="home">Home</a>
         <center><img src="././img/params.png" height="50"></center>
      </header>
		<section data-role="content">
		<center><p><font size="5">${requestScope.statVO.ghvo.id }</font><font size="3" color="#5D5D5D">님 생활 포인트 통계</font></p><br>
			<div id="plotChart5" class="myChart"></div>
			<c:forEach var="spvo" items="${requestScope.statVO.list}"begin="0" varStatus="count">
      			 <span id="5getDate${count.index}">수집일 : <font size="2" color="#5D5D5D">${spvo.time_posted }</font><br></span>
     			 <input type="hidden" id="plot${count.index}" value="${spvo.living_point}" data-mini="true"/>
			</c:forEach></center>
			<footer data-role="footer" data-position="fixed">
    <p><center><img src="./img/footer.png" height="15"></center></p>
    </footer>
		</section>
	</div>
	<script src="js/jquery.jqplot.min.js" type="text/javascript"></script>
	<script src="js/jqplot.pieRenderer.min.js" type="text/javascript"></script>
	<script src="js/jqplot.barRenderer.min.js" type="text/javascript"></script>
	<script src="js/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
	<script src="js/underscore-min.js" type="text/javascript"></script>
	<script src="js/hideAddressBar.js" type="text/javascript"></script>
	<script src="js/app.js" type="text/javascript"></script>
</body>
</html>